<template>
  <div class="pd-20">

    <div>
      <el-input v-model="orderNum" class="w-200" clearable placeholder="请输入订单编号"></el-input>
      <el-date-picker
        v-model="beginTime"
        type="date"
        placeholder="订单开始时间">
      </el-date-picker>

      <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="订单结束时间">
      </el-date-picker>

      <el-select v-model="orderStatus"
                 clearable
                 placeholder="请选择状态">
        <el-option v-for="item in statusList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id">
        </el-option>
      </el-select>


      <el-button
        type="primary"
        @click="handleSearchList()"
        size="small">
        查询搜索
      </el-button>
    </div>


    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button type="primary"
                   v-if="row.orderStatus==1"
                   @click="handleOption('fahuo', row)">去发货
        </el-button>
        <el-button type="primary"
                   v-if="row.orderStatus==2"
                   @click="handleOption('detail', row)">详情
        </el-button>
      </template>
    </element-table>


    <el-dialog title="去发货"
               :visible.sync="showFahuo"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="70%">

      <div class="detailView">
        <div class="detail">
          <div class="name">订单编号</div>
          <div class="value">{{ detailsData.orderNum }}</div>
        </div>
        <div class="detail">
          <div class="name">订单时间</div>
          <div class="value">{{ formatterDate(detailsData.orderTime) }}</div>
        </div>
        <div class="detail">
          <div class="name">收货人姓名</div>
          <div class="value">{{ detailsData.receiverName }}</div>
        </div>
        <div class="detail">
          <div class="name">收货人电话</div>
          <div class="value">{{ detailsData.receiverPhone }}</div>
        </div>
        <div class="detail">
          <div class="name">收货人地址</div>
          <div class="value">{{ detailsData.receiverAddr }}</div>
        </div>
        <div class="detail">
          <div class="name">物品</div>
          <div class="value">{{ detailsData.productName }}</div>
        </div>
        <div class="detail">
          <div class="name">数量单位</div>
          <div class="value">{{ detailsData.num }}{{ detailsData.unit }}</div>
        </div>

      </div>
      <el-form :model="fahuoData"
               label-position="right"
               ref="formModelRef"
               :rules='formModelRules'
               style="margin-top: 20px">
        <el-form-item label="快递公司：" prop="logisticsCompany">
          <el-input v-model="fahuoData.logisticsCompany"
                    clearable
                    style="width: 380px"
                    placeholder="请输入快递公司"></el-input>
        </el-form-item>
        <el-form-item label="快递单号：" prop="logisticsNum">
          <el-input v-model="fahuoData.logisticsNum"
                    clearable
                    style="width: 380px"
                    placeholder="请输入快递单号"></el-input>
        </el-form-item>

      </el-form>
      <p align="center">
        <el-button @click="showFahuo=false"
                   type="info">取 消
        </el-button>
        <el-button type="primary"
                   @click="submitForm()">确 定
        </el-button>
      </p>

    </el-dialog>
    <el-dialog title="详 情"
               :visible.sync="showDetail"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="70%">
      <div class="detailView">
        <div class="detail">
          <div class="name">订单编号</div>
          <div class="value">{{ detailsData.orderNum }}</div>
        </div>
        <div class="detail">
          <div class="name">订单时间</div>
          <div class="value">{{ formatterDate(detailsData.orderTime) }}</div>
        </div>
        <div class="detail">
          <div class="name">收货人姓名</div>
          <div class="value">{{ detailsData.receiverName }}</div>
        </div>
        <div class="detail">
          <div class="name">收货人电话</div>
          <div class="value">{{ detailsData.receiverPhone }}</div>
        </div>
        <div class="detail">
          <div class="name">收货人地址</div>
          <div class="value">{{ detailsData.receiverAddr }}</div>
        </div>
        <div class="detail">
          <div class="name">物品</div>
          <div class="value">{{ detailsData.productName }}</div>
        </div>
        <div class="detail">
          <div class="name">数量</div>
          <div class="value">{{ detailsData.num }}</div>
        </div>
        <div class="detail">
          <div class="name">快递公司</div>
          <div class="value">{{ detailsData.logisticsCompany }}</div>
        </div>
        <div class="detail">
          <div class="name">快递单号</div>
          <div class="value">{{ detailsData.logisticsNum }}</div>
        </div>
        <div class="detail">
          <div class="name">发货人</div>
          <div class="value">{{ detailsData.deliverName }}</div>
        </div>
        <div class="detail">
          <div class="name">发货时间</div>
          <div class="value">{{ formatterDate(detailsData.lastUpdateTime) }}</div>
        </div>
      </div>

      <p align="center" style="margin-top: 20px">
        <el-button @click="showDetail=false"
                   type="info">返 回
        </el-button>

      </p>

    </el-dialog>

  </div>


</template>

<script>
import {formatDate} from '@/utils/date'
import ElementTable from '@/base/ElementTable'

export default {
  name: "rewardOrderList",
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '订单编号',
          prop: 'orderNum',
          align: "center"
        }, {
          label: '订单时间',
          prop: 'orderTime',
          align: 'center',
          formatter: (row, cellValue) => {
            return this.commonFunction.timestampFormat(new Date(row.orderTime), 'yyyy-MM-dd hh:mm:ss')
          }
        }, {
          label: '收货人姓名',
          prop: 'receiverName',
          align: 'center',

        }, {
          label: '发货状态',
          prop: 'orderStatus',
          align: 'center',
          formatter: (row, cellValue) => {
            return this.filterType(row.orderStatus)
          }

        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 450
        }
      ],
      showFahuo: false,
      showDetail: false,
      loading: false,

      orderNum: '',
      receiverName: '',
      beginTime: '',
      endTime: '',
      orderStatus: '',
      pageIndex: 1,
      pageSize: 20,

      pageTotal: 0,
      detailsData: {},
      fahuoData: {},
      list: [],
      statusList: [
        {
          name: '待发货',
          id: 1
        },
        {
          name: '已发货',
          id: 2
        }
      ],
      formModelRules: {
        logisticsCompany: [
          {required: true, message: '请输入快递公司', trigger: 'blur'},
        ],
        logisticsNum: [
          {required: true, message: '请输入快递编号', trigger: 'blur'},
        ]
      },
    }
  },
  created() {
    this.getList()
  },
  components: {
    'element-table': ElementTable
  },
  methods: {
    filterType(orderStatus) {
      return orderStatus == 1 ? '待发货' : '已发货'
    },
    getList() {
      this.loading = true
      this.post(this.api.healthMap.getHealthMapAwardOrderList, {
        orderNum: this.orderNum,
        receiverName: this.receiverName,
        beginTime: this.beginTime,
        endTime: this.endTime,
        orderStatus: this.orderStatus,
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.data.code === '200') {
          this.loading = false
          //判断对象是否为空
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum
        }
      })
    },
    //订单详情
    getHealthMapAwardOrderDetail(id) {
      this.post(this.api.healthMap.getHealthMapAwardOrderDetail, {
        id: id
      }).then((res) => {
        if (res.data.code === '200') {
          this.detailsData = res.data.object
          this.fahuoData.id = res.data.object.id
        }
      })
    },
    //发货
    getHealthMapAwardOrderDeliver() {
      this.post(this.api.healthMap.getHealthMapAwardOrderDeliver, this.fahuoData).then((res) => {
        if (res.data.code === '200') {
          this.showFahuo = false
          this.getList()
          this.$message.success('发货成功')
        }
      })
    },
    //搜索
    handleSearchList() {
      if (this.beginTime) {
        this.beginTime = formatDate(new Date(this.beginTime), 'yyyy-MM-dd')
      }
      if (this.endTime) {
        this.endTime = formatDate(new Date(this.endTime), 'yyyy-MM-dd')
      }
      this.getList()
    },
    async handleOption(op, row) {
      switch (op) {
        case 'fahuo':
          this.showFahuo = true
          this.fahuoData.logisticsCompany = ''
          this.fahuoData.logisticsNum = ''
          this.getHealthMapAwardOrderDetail(row.id)
          break
        case 'detail':
          this.showDetail = true
          this.getHealthMapAwardOrderDetail(row.id)
          break
      }
    },

    //发货
    submitForm() {
      this.$refs.formModelRef.validate(async (valid) => {
        if (valid) {
          this.getHealthMapAwardOrderDeliver()
        }
      })

    },
    // 时间转换
    formatterDate(time) {
      return this.commonFunction.timestampFormat(new Date(time), 'yyyy-MM-dd hh:mm')
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  }
}
</script>

<style scoped>
.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
